<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初体验react使用</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      let name = '张三abc'
      let age = 21
      const fn = () => 'hello fn'

      const vnode = (
        <div>
          {/* 绑定变量 {变量} */}
          <div>{name}</div>
          {/* 运算 */}
          <div>{1 + 1}</div>
          {/* 内置方法 */}
          <div>{name.slice(0, 3)}</div>
          {/* 调用自定义函数 */}
          <div>{fn()}</div>
          {/*
            不能在模板语法中写 if switch可for/forEach/while let/var/const等语法是不行的
            但是它可以使用 三目运算
          */}
          <div>{age < 2 ? '不干活的' : '打工仔'}</div>
          <div>{age < 2 ? <h3>不干活的</h3> : <h3>打工仔</h3>}</div>
          {/* 字符串拼接 */}
          <div>{name + '@'}</div>
        </div>
      )

      ReactDOM.createRoot(document.getElementById('root')).render(vnode)
    </script>
  </body>
</html>
